<template>
	<view class="text-df bg-white  padding-sm " style="border-radius: 0 0 20rpx 20rpx">
		<view v-if="detail.status==0" class="" style="">
			<view class="flex-row">
				<view class="iconfont icon-shijian" style="font-size: 40rpx;"></view>
				<view class="text-lg">待付款</view>
			</view>
			<view class="flex-row margin-top-xs text-sm text-low">
				<text>还剩</text>
				<uni-countdown :showDay="false" :hour="1" :minute="12" :second="40" color="#EE3F4D"/>
				<text>订单自动取消</text>
			</view>
		</view>
		<view v-else class="flex-row">
			<view class="iconfont icon-shijian" style="font-size: 40rpx;"></view>
			<view class="text-lg">待发货</view>
		</view>
	</view>

	<view class="text-df bg-white margin-top-com padding-sm border-radius-sm">
		<view v-for="(good,good_index) in detail.goods" :key="good_index" class="margin-bottom-sm flex-row-bt">
			<view class="flex-row">
				<image src="https://api.anred.qrsk.net/admin/profile/product/2024/05/10/OIP-C (10)_20240510162922A005.jpg" mode="aspectFill" style="width: 200rpx; height: 180rpx; border-radius: 20rpx;"
					class=""></image>
				<view style="width: 450rpx;" class="margin-left-xs padding-tb-xs">
					<!-- <view class="text-lg">{{good.title}}</view>
					<view class=" text-sm text-low margin-top-lg">订单号： {{}}</view> -->
					<view class="flex-row-bt ">
						<view class="text-lg">{{good.title}}</view>
						<view class="text-lg theme-color text-bold ">￥{{good.point}}</view>
					</view>
					<view class="flex-row-bt text-sm text-low margin-top-lg">
						<view class="">{{good.type}} , {{good.size}}</view>
						<view class="">×{{good.num}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="flex-row" style="float: right;">
			<view class="text-low text-sm" style="line-height: 50rpx;">共2件，</view>
			<text class="text-low text-sm" style="line-height: 50rpx;">总共：</text>
			<text class="text-lg theme-color text-bold ">￥{{detail.total_point}}</text>
		</view>

		<view style="height: 40rpx;"></view>

	</view>

	<view class="text-df bg-white margin-top-sm padding-sm border-radius-sm">
		<view class="">订单信息</view>
		<view class="flex-row-bt margin-top-sm text-sm">
			<view class="text-low">订单编号:</view>
			<view>{{detail.id}}</view>
		</view>
		<view class="flex-row-bt margin-top-xs text-sm">
			<view class="text-low">下单时间:</view>
			<view>{{detail.time}}</view>
		</view>
		<view class="flex-row-bt margin-top-xs text-sm">
			<view class="text-low">下单时间:</view>
			<view>{{detail.time}}</view>
		</view>
		<view class="flex-row-bt margin-top-xs text-sm">
			<view class="text-low">下单时间:</view>
			<view>{{detail.time}}</view>
		</view>
		<view class="flex-row-bt margin-top-xs text-sm">
			<view class="text-low">下单时间:</view>
			<view>{{detail.time}}</view>
		</view>

	</view>

	<view style="bottom: 0; position: fixed; width: 100%;" class="bg-white padding-xs">
		<!-- 待付款 -->
		<view class="flex-row" v-if="detail.status==0" style=" float: right;">
			<view class="text-low text-sm border-radius margin-right-sm"
				style="border: 1px solid #9f9f9f; padding: 8rpx 26rpx;">
				取消订单
			</view>
			<view class="theme-color text-sm border-radius" style="border: 1px solid #EE3F4D; padding: 8rpx 26rpx;">
				继续付款
			</view>
		</view>

		<!-- 待发货 -->
		<view class="flex-row" v-if="detail.status==1">
			<view class="theme-color text-sm border-radius" style="border: 1px solid #EE3F4D; padding: 8rpx 26rpx;">
				退款
			</view>
		</view>

		<!-- 待收货 -->
		<view class="flex-row" v-if="detail.status==2">
			<view class="text-low text-sm border-radius margin-right-sm"
				style="border: 1px solid #9f9f9f; padding: 8rpx 26rpx;">
				确认收货
			</view>
			<view class="theme-color text-sm border-radius" style="border: 1px solid #EE3F4D; padding: 8rpx 26rpx;">
				退款
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app"

	const detail = reactive({
		time: '2024年3月2日 09：01',
		total_point: 345,
		status: 0,
		id: '1111111111111111111111',
		goods: [{
			title: '铭文贸易',
			img: '../../../static/image/exchange/cloth.png',
			point: 123,
			num: 1,
			type: '咖色',
			size: 'M码',
		}, {
			title: '铭文贸易',
			img: '../../../static/image/exchange/cloth.png',
			point: 123,
			num: 1,
			type: '咖色',
			size: 'M码',
		}]
	})
	const id = ref('')
	onLoad((option) => {
		id.value = option.id
	})
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
	.order-butten{
		width: 60px;
		height: 25px;
		background: #F9B9BE;
		font-size: 10.2px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #DE483D;
		border-radius: 5px;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
	}
	.order-butten-red{
		width: 60px;
		height: 25px;
		background: #DE483D;
		font-size: 10.2px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 5px;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
	}
</style>
